﻿@{
   
}

<h2>Admin paneel</h2>
<div id="panelLeft">
</div>

<div id="tabs">
    <ul>
        @foreach(Declaratie.Models.Project p in ViewBag.Projects){
            <li><a href="#tabs-@p.ProjectId"> @p.Titel</a></li>
        }
    </ul>

    @foreach(Declaratie.Models.Project p in ViewBag.Projects){
        <div id="tabs-@p.ProjectId">
            <h3>Project: @p.Titel</h3>
            <p>Soort: @p.Soort</p>
            <p>Looptijd begin: @p.GetLooptijdBegin()</p>
            <p>Looptijd eind: @p.GetLooptijdEind()</p>
            <p>Consortiumpartners: @p.ConsortiumPartners.Count</p>
            
            @Html.ActionLink("Details", "ProjectDetails", new { p.ProjectId }, null)
        </div>

        }
</div>
<input type="button" value="Nieuw project" onclick="location.href='@Url.Action("AddProject","Home")'"/>



<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
<link rel="stylesheet" href="@Url.Content("~/Content/themes/base/jquery.ui.all.css")" type="text/javascript" />

<script type="text/javascript">
    $(function () {
        $("#tabs").tabs().addClass("ui-tabs-vertical ui-helper-clearfix"); ;
        $("#tabs li").removeClass("ui-corner-top").addClass("ui-corner-left");
    });
</script>

<style>
    .ui-tabs-vertical { width: 55em; }
    .ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; }
    .ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; }
    .ui-tabs-vertical .ui-tabs-nav li a { display:block; }
    .ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; }
    .ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;}
</style>